<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="shortcut icon" href="../img/wechat.jpg"/>
		<script type="text/javascript" src="../javascript高级/js/myModule.js" ></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				width: 100%;
				height: 100%;
			}
			#div{
				width: 500px;
				height: 400px;
				position: relative;
				top: 100px;
				left: 200px;
			}
			#img{
				width: 500px;
				height: 400px;
				border: 1px solid #000;
			}
			#p-top{
				position: absolute;
				top: 0;
				text-align: center;
				width: 100%;
				background: rgba(255, 255, 255, 0.5);
			}
			#p-bottom{
				position: absolute;
				bottom: 0;
				text-align: center;
				width: 100%;
				background: rgba(255, 255, 255, 0.5);
			}
			#span-left{
				display: inline-block;
				width: 50px;
				height: 50px;
				position: absolute;
				left: 0;
				top: 175px;
				text-align: center;
				line-height: 45px;
				font-size: 30px;
				color: #FFF;
				background-color: rgba(51, 51, 51, 0.5);				
			}
			#span-left:hover{
				background-color: rgba(51, 51, 51, 0.8);				
			}
			#span-right{
				display: inline-block;
				width: 50px;
				height: 50px;
				position: absolute;
				right: -2px;
				top: 175px;	
				text-align: center;
				line-height: 45px;
				font-size: 30px;
				color: #FFF;
				background-color: rgba(51, 51, 51, 0.5);			
			}
			#span-right:hover{
				background-color: rgba(51, 51, 51, 0.8);				
			}
		</style>
	</head>
	<body>
		
		<div id="div">
			<p id="p-top">描述</p>
			<img id="img" src=""/>
			<span id="span-left"><</span>
			<span id="span-right">></span>
			<p id="p-bottom">计算</p>
		</div>
		
		
		
		
		<script>
			var arr=["../img/lq1.jpg", "../img/lq2.jpg", "../img/lq3.jpg", "../img/lq6.jpg"];
			var index = 0;
			
			function changeImg(){
				var img = document.getElementById("img");
				var pTop = document.getElementById("p-top");
				var pBottom = document.getElementById("p-bottom");
				pBottom.innerHTML = index + 1 +" / " + arr.length;
				img.src = arr[index];
				pTop.innerText = img.src;
			}
			
			window.onload=function(){
				changeImg();
			}
			
			var spanLeft = document.getElementById("span-left");
			spanLeft.onclick = function(){
				index--;
				if(index == -1){
					index = arr.length - 1;
				} 
				
				changeImg();
			}
			
			var spanRight = document.getElementById("span-right");
			spanRight.onclick = function(){
				index++;
				if(index == arr.length){
					index = 0;
				}
				
				changeImg();
			}
 		</script>
	</body>
</html>
